<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="当日装车统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <div class="div_d_image">
                    <p class="style_image_p blue">{{ dataA.Lighthydrocarbo }}<span
                            class="style_image_span blue">(车)</span></p>
                    <img class="div_d_images" src="@/assets/组 2396.png" alt="">
                    <p class="style_image_p2">轻烃</p>
                </div>
                <div class="div_d_image">
                    <p class="style_image_p green">{{ dataA.Liquefiedgas }}<span
                            class="style_image_span green">(车)</span></p>
                    <img class="div_d_images" src="@/assets/组 2388.png" alt="">
                    <p class="style_image_p2">液化气</p>
                </div>
                <div class="div_d_image">
                    <p class="style_image_p blues">{{ dataA.Ethane }}<span class="style_image_span blues">(车)</span></p>
                    <img class="div_d_images" src="@/assets/组 2387.png" alt="">
                    <p class="style_image_p2">乙烷</p>
                </div>
            </div>
        </div>
        <div class="div2">
            <TitleView title="七日拉运数据" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <CarRightA :data="dataB" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="充装记录" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <CarRightB :data="DataDevice" />
            </div>
        </div>
    </div>
</template>

<script>
import { car_right } from "@/request/api.js";
import CarRightA from './components/CarRightA'
import CarRightB from './components/CarRightB'
export default {
    components: {
        CarRightA,
        CarRightB
    },
    data() {
        return {
            DataDevice: [],
            dataA: {
                Lighthydrocarbo: 0,
                Liquefiedgas: 0,
                Ethane: 0
            },
            dataB: [],
            createTime: "",
            monthDates: []
        }
    },
    created() {
        this.getCurrentDate();
        this.generateMonthDates()
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            car_right().then((res) => {
                console.log("res:", res, this.createTime);
                this.dataA = {
                    Lighthydrocarbo: res.data.data1[0].value,
                    Liquefiedgas: res.data.data1[1].value,
                    Ethane: res.data.data1[2].value
                }
                // this.createTime="2023-04-17"
                // res.data.data1.forEach(element => {
                //     if (element.entruckTime && element.entruckTime.slice(0, 10) == this.createTime) {
                //         this.dataA.Lighthydrocarbo += element.lanzhouLighthydrocarbon + element.shangguLighthydrocarbon
                //         this.dataA.Liquefiedgas += element.lanzhouLiquefiedgas + element.shangguLiquefiedgas
                //         this.dataA.Ethane += element.shangguEthane
                //     }
                // });
                // let arr = []
                // this.monthDates.forEach(elements => {
                //     let obj = {
                //         time: elements,
                //         Lighthydrocarbo: 0,
                //         Liquefiedgas: 0,
                //         Ethane: 0
                //     }
                //     res.data.data1.forEach(element => {
                //         if (element.entruckTime && element.entruckTime.slice(0, 10) == elements) {
                //             obj.Lighthydrocarbo = element.lanzhouLighthydrocarbon + element.shangguLighthydrocarbon
                //             obj.Liquefiedgas = element.lanzhouLiquefiedgas + element.shangguLiquefiedgas
                //             obj.Ethane = element.shangguEthane
                //         }
                //     });
                //     arr.push(obj)
                // })
                // arr.forEach(element => {
                //     this.dataB.push([element.time, element.Lighthydrocarbo, element.Liquefiedgas, element.Ethane])
                // })
                this.dataB = res.data.data2
                // dataC-------------
                this.DataDevice = res.data.data3



            })
        },
        getCurrentDate() {
            // 创建一个新的Date对象
            const date = new Date();

            // 格式化日期为YYYY-MM-DD格式
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并确保是两位数
            const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数

            // 组合成最终的日期字符串
            this.createTime = `${year}-${month}-${day}`;
        },
        generateMonthDates() {
            const today = new Date();
            const year = today.getFullYear();
            const month = today.getMonth(); // 注意：月份是从0开始的

            // 获取本月的第一天和最后一天
            const firstDayOfMonth = new Date(year, month, 1);
            const lastDayOfMonth = new Date(year, month + 1, 0);

            // 初始化并填充日期数组
            this.monthDates = [];
            for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
                const formattedDate = (
                    '0' + day
                ).slice(-2); // 确保日期是两位数
                const monthStr = (
                    '0' + (month + 1)
                ).slice(-2); // 月份加1，并确保是两位数
                this.monthDates.push(`${year}-${monthStr}-${formattedDate}`);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 217px;

    .div1_d {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .div_d_image {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .div_d_images {
                width: 85px;
                height: 84px;
                position: absolute;
            }

            .blue {
                color: #32A5E0;
            }

            .blues {
                color: #2182F1;
            }

            .green {
                color: #50DB85;
            }

            .style_image_p {
                width: 85px;
                height: 85px;
                font-family: DIN;
                font-weight: bold;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                margin: 0;

                .style_image_span {
                    font-size: 12px;
                    margin-top: 4px;
                }

            }

            .style_image_p2 {

                // width: 32px;
                height: 16px;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #D0E5F5;
            }
        }
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {}
}
</style>